jQuery Effects

In this lesson, you will learn about the basics of jQuery effects; how to select elements, and how to apply effects, like showing or hiding an element. These are jQuery’s built-in effects and animation functions. Making elements appear and disappear is a common JavaScript functionality which is helpful to create features like drop-down navigation menus, slideshows, or pop-up screens in websites. JQuery facilitate programmers with handful functions which can create these effects in one line of code.

jQuery and Effects

To use these effects, simply apply them to the element being selected, like you use any other jQuery function. For example, to hide an element with class sub_menu you can use:

$('.sub_menu').hide();

Every effect function takes two parameters: (1) an optional speed setting and (2) a callback function. The speed will determine the amount of time the effect takes to complete, while a callback function is a function that is called when the effect is completed.

To assign a value to the speed parameter, you can use ‘fast’, ‘normal’, or ‘slow. You can also use a number which represents the number of milliseconds the effect will take to complete. To represent 10 seconds, use 10000 as 1 sec = 1000 milliseconds.

If you want the effect to be ‘slow’, you can write as:

$('element').effectName('slow');

Or if you want the effect to complete in 5 seconds, the code will be:

$('element').effectName(5000);

You don’t have to use quotes around the value when the written value of speed is in milliseconds (numbers).

The numerical values of speed in terms of fast, normal, and slow are equal to 200 milliseconds, 400 milliseconds, and 600 milliseconds.
So writing $(‘element’).effectName(‘slow’); is same as writing $(‘element’).effectName(600);

Types of jQuery effects

You can categorize jQuery effects in the following ways.
1. Effects which can show/hide elements
2. Effects which can fade in or out elements
3. Effects which can slide in or out elements.

Show or Hide elements

jQuery provides 3 functions to show or hide elements.

1. Show() function makes a hidden element visible. It works only if the element is already hidden.
2. Hide() function hides a visible element but doesn’t remove it from the Document Object Model.
3. Toggle() function will hide a visible element and show a hidden element. This is mostly used if you are not aware of the state of the element at a particular time.

Fading Elements

This would create a more dramatic effect. You can also control the speed of the effect as mentioned earlier.

1. fadeIn() function makes a hidden element visible while applying the fading-in effect on the element.
2. fadeout() function hides a visible element by fading it out of the view.
3. fadeToggle() function reverse the current display state of the element while fading in or out as required.
4. fadeTo() function is slightly different than the above three functions. It fades an element to the defined opacity. For example, if you have to make an element semi-transparent when displayed in the view, you can write:

$('.element').fadeTo('normal', 0.50);

This function will change the element’s opacity to 50%.

Sliding Elements

These jQuery functions will create an effect like elements are sliding in or out of the view of the display.

1. slideDown() function makes a hidden element slide into the view. First, the top of the element appears and then the rest of the element appears.
2. SlideUP() function hides the element from view by hiding the bottom of it and moving anything below the element up until the element disappears.
3. slideToggle() function applies the slideDown() if the element is hidden, and the slideUp() if the element is visible.

Other than these, there are .animate() and .delay() functions which you are going to learn in the upcoming lessons. In the next lesson, we will see these functions in more depth and how we can use these to create the effects and animations to make our website more interactive with a few lines of codes.

In case, you have any question about jQuery effects, please let me know in the comments section below.